<template>
  <div class="box">
    <headerBox :development="development" :title_name="cityName" ref="headerBox"></headerBox>
    <div class="content">
      <div class="left">
        <div class="column left">
          <div class="panel bar" :style="{background:'url('+ panel_img + ') rgba(255, 255, 255, 0.04)'}">
            <div class="choice-items">
              <div class="choice-item" @click="handleChoice(index)" :style="{background:(index == current_choice ? '#4969AC' :''),
            color:(index == current_choice ? '#fff' :'')}" v-for="(item,index) in choiceList">{{ item.text }}
              </div>
            </div>
            <div class="panel-footer"></div>
          </div>
          <div class="panel line" :style="{background:'url('+ panel_img + ') rgba(255, 255, 255, 0.04)'}">
            <div class="table-box">
              <table border="1" cellspacing="0">
                <thead>
                <th>类别</th>
                <th>数量(家)</th>
                <th>3量以上</th>
                </thead>
                <tbody class="tList">
                <tr v-for="(item,index) in tableList" v-bind:class="{ active: (index % 2 == 0 ? 'active' : '') }">
                  <td>{{ item.text }}</td>
                  <td>{{ item.num1 }}</td>
                  <td>{{ item.num2 }}</td>
                </tr>
                </tbody>
              </table>
            </div>
            <div class="panel-footer"></div>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="funBtns">
          <img class="back" src="../../assets/images/back.png" @click="back">
          <img class="goAhead" src="../../assets/images/goAhead.png" @click="goAhead">
          <img class="Home" src="../../assets/images/home.png" @click="backHome">
        </div>
        <map-box :pointData="marksList" :cityCode="cityCode" :isDetail="true" ref="childMap"
                 style="height: 100%;width: 100%;"></map-box>
        <div class="Tuglie">
          <div class="Tuglie-item" v-for="item in tipsList">
            <span></span>
            <p>{{ item.text }}</p>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import MapBox from "../../components/Map2/Map2"
import Header from "../../components/header"
import { queryLevel, queryMarks } from '../../api/system/marks'
import headerBox from '@/components/HomePart/header_top'
import merge from 'webpack-merge'
export default {
  name: "detail",
  components: {
    MapBox,
    Header,
    headerBox
  },
  data() {
    return {
      //类型
      type: null,
      detailsList: [],
      //专项发展指数
      development:123,
      choiceList: [{
        id: 0,
        text: '1.原材料企业'
      }, {
        id: 1,
        text: '2.制造业企业'
      }, {
        id: 2,
        text: '3.施工企业'
      }, {
        id: 3,
        text: '4.物流企业'
      }, {
        id: 4,
        text: '5.建筑服务业'
      }],

      tipsList: [{
        text: '砂石',
      }, {
        text: '水泥',
      }, {
        text: '钢材',
      }, {
        text: '玻璃',
      }],
      tableList:[],
      current_choice: 0,
      //城市代码
      cityCode: null,
      //城市名称
      cityName: null,
      panel_img: require("../../assets/images/line(1).png"),
      marksList: [],
    }
  },
  beforeRouteEnter(to, from, next) {
    // ...
    window.document.body.style.backgroundColor = '#030D48'
    next();
  },
  created() {
    this.cityCode = this.$route.query.cityCode
    this.cityName = this.$route.query.cityName
    if(this.$route.query.type){
      this.type = this.$route.query.type
      this.categoryParentId = this.$route.query.categoryParentId
    }else{
      this.type = 1
    }

    // this.handleChoice(this.current_choice)

    // this.getMarksList()
    this.handleChoice(this.type - 1)
  },
  mounted() {
    // flexible(window, document)
  },
  methods: {
    //获取企业星级
    getMarksLevel(){
      queryLevel({
        cityCode: this.cityCode,
        categoryParentId: this.categoryParentId
      }).then(res => {
        this.tableList = res.data.map(item => {
          return {
            text:item.categoryName,
            num1:item.total,
            num2:item.total
          }
        })
        console.log(this.tableList,"this.tableList")
      })
    },
    //获取企业信息
    async getMarksList() {
      const parmer = {
        cityCode: this.cityCode,
        categoryParentId: this.categoryParentId,
      }
      const response =  await queryMarks(parmer)
      //设置vuex中的markList
      this.marksList = response.rows.map(item => {
        return {
          company_name: item.companyName,
          introduction: item.companyProfile,
          type: this.changeTypeId(item.categoryParentId),
          style: item.categoryColorIndex,
          lnglat: [item.longitude, item.latitude],
          company_level: item.companyLevel,
          categoryParentId: item.categoryParentId,
          categoryId: item.categoryId,
          marksId: item.marksId,
        }
      })
    },
    //前进
    goAhead() {
      this.$router.forward();
      // this.$router.push({
      //   path: '/model', query: {
      //     cityCode: this.cityCode,
      //     cityName: this.cityName
      //   }
      // })
    },
    //后退
    back() {
      // this.$router.go(-1)
      this.$router.push({
        path: '/map', query: {
          cityCode: this.cityCode,
          cityName: this.cityName,
          type:this.type
        }
      })
    },
    backHome() {
      this.$router.push("/map")
    },
    changeTypeId(id) {
      if (id == 1) {
        return 1
      } else if (id == 7) {
        return 2
      } else if (id == 12) {
        return 3
      } else if (id == 17) {
        return 4
      } else if (id == 22) {
        return 5
      }
    },
    changeParentId(id) {
      if (id == 1) {
        return 1
      } else if (id == 2) {
        return 7
      } else if (id == 3) {
        return 12
      } else if (id == 4) {
        return 17
      } else if (id == 5) {
        return 22
      }
    },
    async handleChoice(index) {
      this.current_choice = index
      //改变url
      let path = this.$router.history.current.path;
      let query = this.$router.history.current.query;
      this.$router.push({
        query:merge(query,{'type':index + 1})
    })


      this.categoryParentId = this.changeParentId(index + 1)
      await this.getMarksList()
      this.getMarksLevel()
      if (index == 0) {
        this.tipsList = [{
          text: '砂石',
        }, {
          text: '水泥',
        }, {
          text: '钢材',
        }, {
          text: '玻璃',
        }]

      } else if (index == 1) {
        this.tipsList = [{
          text: '混凝土部品',
        }, {
          text: '墙板',
        }, {
          text: '钢结构',
        }, {
          text: '玻璃',
        }]

      } else if (index == 2) {
        this.tipsList = [{
          text: '小型企业：<= 5000万',
        }, {
          text: '中型企业：5000万 < 产值 <= 1亿',
        }, {
          text: '大型企业：1亿 < 产值 <= 5亿',
        }, {
          text: '龙头企业：产值 => 5亿',
        }]

      } else if (index == 3) {
        this.tipsList = [{
          text: '小型物流：运量 <= 1万吨',
        }, {
          text: '中型物流：1万吨 < 运量 <= 5万吨',
        }, {
          text: '大型物流：5万吨 < 运量 <= 10万吨',
        }, {
          text: '综合物流：运量 > 10万吨',
        }]

      } else if (index == 4) {
        this.tipsList = [{
          text: 'BIM设计',
        }, {
          text: '装配式设计',
        }, {
          text: '咨询规划',
        }, {
          text: '创新中心',
        }]

      }
      this.$nextTick(() => {
        this.$refs.childMap.addLotPoint()
      })
      // setTimeout(() => {
      //   this.$nextTick(() => {
      //     this.$refs.childMap.addLotPoint()
      //   })
      // }, 200)
    },


  }
}
</script>
<style scoped lang="scss">

body, html {
  height: 100%;
  background: #030D48;
  background-size: cover;
}
.funBtns{
  position: absolute;
  bottom: 20px;
  left: 40%;
  transform: translateX(-50%);
  display: flex;
  width: 110px;
  justify-content: space-between;
  z-index: 99999;
  .back {
    position: absolute;
    left: 50px;
    z-index: 99999;
    bottom: 20px;
    color: #fff;
    line-height: 50px;
    width: 50px;
    opacity: .5;
    cursor: pointer;
  }

  .goAhead {
    position: absolute;
    left: 200px;
    z-index: 99999;
    bottom: 20px;
    color: #fff;
    line-height: 50px;
    width: 50px;
    cursor: pointer;
    opacity: .5;
  }

  .Home {
    position: absolute;
    left: 130px;
    z-index: 99999;
    bottom: 20px;
    color: #fff;
    line-height: 50px;
    width: 50px;
    opacity: .5;
    cursor: pointer;
  }
}
.box {
  height: 100%;

  .content {
    height: calc(100vh - 80px);
    display: flex;
    padding: 0.1rem 0.1rem 0rem 0.1rem;

    .left {
      flex: 2;

      .panel {
        transition: all 1s;
        position: relative;
        height: 4.8rem;
        border: 1px solid rgba(25, 186, 139, 0.17);
        padding: 0 0.1875rem 0.5rem;
        margin-bottom: 0.1875rem;
        &:nth-child(4) {
          margin-bottom: 0;
        }
      }

      .panel .chart {
        height: 1.9rem;
        position: relative;
        z-index: 999;
      }
    }

    .panel .chart {
      height: 3rem;
    }

    .panel {
      position: relative;
      height: 7rem;
      border: 1px solid rgba(25, 186, 139, 0.17);
      padding: 0 0.1875rem 0.5rem;
      margin-bottom: 0.1875rem;
    }

    .panel:hover {

      &:after {
        width: 98%;
        height: 98%;
      }

      &:before {
        width: 98%;
        height: 98%;
      }

      .panel-footer::before {
        width: 98%;
        height: 98%;
      }

      .panel-footer::after {
        width: 98%;
        height: 98%;
      }
    }

    .panel::before {
      position: absolute;
      top: 0;
      left: 0;
      content: "";
      width: 3%;
      height: 5%;
      border-top: 2px solid #02a6b5;
      border-left: 2px solid #02a6b5;
      transition: all 0.5s;
    }

    .panel::after {
      position: absolute;
      top: 0;
      right: 0;
      content: "";
      width: 3%;
      height: 5%;
      border-top: 2px solid #02a6b5;
      border-right: 2px solid #02a6b5;
      transition: all 0.5s;
    }

    .panel .panel-footer {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      transition: all 0.5s;
    }

    .panel .panel-footer {
      height: 100%;
      width: 100%;
    }

    .panel .panel-footer::before {
      position: absolute;
      bottom: 0;
      left: 0;
      content: "";
      width: 3%;
      height: 5%;
      border-bottom: 2px solid #02a6b5;
      border-left: 2px solid #02a6b5;
      transition: all 0.5s;

    }

    .panel .panel-footer::after {
      position: absolute;
      bottom: 0;
      right: 0;
      content: "";
      width: 3%;
      height: 5%;
      border-bottom: 2px solid #02a6b5;
      border-right: 2px solid #02a6b5;
      transition: all 0.5s;
    }

    .panel h2 {
      height: 0.5rem;
      line-height: 0.5rem;
      text-align: center;
      color: #fff;
      font-size: 0.18rem;
      font-weight: 400;
    }

    .panel h2 a {
      margin: 0 0.1875rem;
      color: #fff;
      text-decoration: underline;
    }

    //.left {
    //  flex: 2;
    //  padding-right: 1rem;
    //
    .choice-items {
      width: 100%;
      height: 100%;
      display: flex;
      margin-top: .3rem;
      flex-direction: column;
      position: relative;
      z-index: 999;

      .choice-item {
        cursor: pointer;
        flex: 1;
        color: #000;
        font-size: 24px;
        background: #D8D3D9;
        margin-bottom: 8px;
        align-items: center;
        justify-content: center;
        display: flex;

        &:hover {
          background: #0F63D2;
        }
      }
    }

    //  }
    //
    table {
      width: 100%;
      border: 1px solid #0e94ea;
      margin-top: .35rem;

      th {
        text-align: left;
        color: #fff;
        line-height: 50px;
        width: 33%;
        font-size: .35rem;
        text-align: center;
        background: rgba(14, 148, 234, 0.4)
      }

      tr {
        border-top: 1px solid #0e94ea;
        background: rgba(14, 148, 234, 0.1);
      }

      td {
        border-right: 1px solid #0e94ea;
        height: 0.5rem;
        font-size: .27rem;
        line-height: 0.7rem;
        color: #cdddf7;
        text-align: center;
      }
    }

    .right {
      flex: 8;
      height: 100%;
      position: relative;

      .back {
        position: absolute;
        left: 50px;
        z-index: 99999;
        bottom: 20px;
        color: #fff;
        line-height: 50px;
        width: 50px;
        opacity: .5;
        cursor: pointer;
      }

      .goAhead {
        position: absolute;
        left: 200px;
        z-index: 99999;
        bottom: 20px;
        color: #fff;
        line-height: 50px;
        width: 50px;
        cursor: pointer;
        opacity: .5;
      }

      .Home {
        position: absolute;
        left: 130px;
        z-index: 99999;
        bottom: 20px;
        color: #fff;
        line-height: 50px;
        width: 50px;
        opacity: .5;
        cursor: pointer;
      }
    }
  }
}

.backHome {
  position: absolute;
  bottom: 30px;
  left: 30px;
  font-size: 50px;
  cursor: pointer;
}
.Tuglie {
  position: absolute;
  right: 2rem;
  bottom: 2rem;
  background: rgba(255, 255, 255, 0.3);
  padding: .3rem;

  .Tuglie-item {
    display: flex;
    line-height: .5rem;
    align-items: center;

    span {
      display: inline-block;
      width: .2rem;
      height: .2rem;
      margin-right: .3rem;
    }

    &:nth-child(1) {
      span {
        background: #31A0E0;
      }
    }

    &:nth-child(2) {
      span {
        background: #D72F00;
      }
    }

    &:nth-child(3) {
      span {
        background: #F4EC2A;
      }
    }

    &:nth-child(4) {
      span {
        background: #E0E0E0;
      }
    }

    &:nth-child(5) {
      span {
        background: #3ADD93;
      }
    }
    &:nth-child(6) {
      span {
        background: #BBABCF;
      }
    }
  }
}

</style>
